import { type FC } from 'react';
import { Image } from 'expo-image';
import { View, Text } from 'react-native';
import { useSafeState, useMemoizedFn } from 'ahooks';
import { Ionicons } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';
import { hexToRgba } from '@/utils/helper';
import { primaryColor } from '@/constants/Colors';
import EditButton from '../../components/EditButton';
import StepWrapper from '../../components/StepWrapper';
import styles from './styles';
import { type StepProps } from '../types';

const desc = 'If your profile has no photos, it will not be viewable to others and you are unable to interact with others.';

const Step1: FC<StepProps> = (props) => {
  const [image, setImage] = useSafeState<string | null>(null);

  const pickImage = useMemoizedFn(async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images'],
      allowsEditing: true,
      aspect: [4, 3],
      quality: .8,
    });

    if (!result.canceled) {
      setImage(result.assets[0].uri);
    }
  });

  const onSubmit = useMemoizedFn(() => {
    props.onNext?.();
  });

  return (
    <StepWrapper
      desc={desc}
      onSubmit={onSubmit}
      disabled={!image}
      buttonText="Continue"
      title="Give your profile a face"
    >
      <View style={styles.container}>
        <View style={styles.tipContent}>
          <Text style={styles.tip}>{desc}</Text>
        </View>
        <View style={styles.content}>
          <View style={styles.upload}>
            <EditButton
              onPress={pickImage}
              style={styles.upload_edit}
            />
            {image ? (
              <Image
                style={styles.image}
                source={{ uri: image }}
              />
            ) : (
              <Ionicons
                size={48}
                name="image-outline"
                color={hexToRgba(primaryColor, .6)}
              />
            )}
          </View>
        </View>
      </View>
    </StepWrapper>
  );
}

export default Step1;